<template>
  <div class="friend-links" v-if="links.length>0">
      <div class="card-header">
   <h5 class="title"><i class="fa fa-link"></i>  友情链接</h5>
      <div class="underline"></div>
    <ul>
      <li v-for="link in links " :key="link.id">
        <a :href="link.url" target="_blank">{{ link.name }}</a>
      </li>
    </ul></div>
  </div>
</template>


<script setup>
    const links = ref([]);
    onMounted(async () => {
      const response = await axios.get('/api/blog/friendlink/random/');
      links.value = response.data;
    });
</script>

<style scoped>
    .friend-links {
  width: 100%;
  border-radius: 8px;
  border: 1px solid #ddd;
  margin-bottom: 20px;
  background-color: var(--card-bg-color, #fff);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  transition: background-color 0.3s;
}
.card-header {
  padding: 10px;
}
ul {
  list-style: none;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
}

li {
  margin: 0 0 10px 10px;
  background-color: var(--card-link-bg-color, #fff);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  border-radius: 4px;
  height: 32px;
  align-items: center;
  display: flex;
  padding: 0 3px;
}
li:hover {
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
  border: 1px solid #ddd;
}

a {
  color: var(--card-link-color, #007bff);
  text-decoration: none;
  line-height: 1.5;
}
a:hover {
  color: var(--card-link-hover-color, #5fb878);
}
.title {
  font-size: 1.2em;
  font-weight: bold;
  color: var(--card-link-text-color, #333);
}


</style>
